<template>
	<input @click="clickMyButton($event,2)" type="button" :value="value" />
</template>

<script setup lang="ts">
	import { PropType } from 'vue';

	type CustomStyle = [
		{
			width : string,
			height : string,
			color : string,
			fontSize : string
		}
	]
	interface Button {
		// ? 可以为空或不为空
		value ?: string,
		//复杂的 props 类型
		customStyle ?: CustomStyle
	}

	//基于运行时声明
	const props = defineProps({
		value: {
			type: String,
			require: true,
			default: '按钮'
		},
		customStyle: {
			type: Object as PropType<CustomStyle>,
			default: {}
		},
		data: {
			type: Array as PropType<string[]>,
			default: () => []
		},
		func: {
			type: Function as PropType<() => string>,
			default: () => []
		}
	})
	// const props = defineProps<button>();
	//使用基于类型的声明，使用响应式props解构，声明默认值
	// const {value = '按钮',customStyle = [{color:"red"}]} = defineProps<Button>();
	// const props = withDefaults(defineProps<Button>(), {
	// 	value: 'hello',
	// })
	// console.log(value, customStyle);

	//自定义事件
	type moduleEmits = {
		click: [value : number],
		update: () => void,
	}
	type moduleEmits1 = {
		(e:'click',value:number):void,
		(e:'update'):void,
	}
	//const emits = defineEmits(['click','update']);
	const emits = defineEmits<moduleEmits1>();

	const clickMyButton = (event : Event,value : number) => {
		console.log(event);
		emits("click",value);
	}
</script>

<style>
</style>